<script setup>
import { useVbenDrawer } from '@vben/common-ui';

import {
  Card,
  Descriptions,
  DescriptionsItem,
  Image,
  Tag,
} from 'ant-design-vue';

import pruductImage from '#/assets/images/product.png';

import ExampleReport from '../com/exampleReport/index.vue';
import MqttParams from '../com/mqttParams/index.vue';
import { getDeviceStatus } from '../dict';

const props = defineProps(['device']);

const [MqttDrawer, MqttDrawerApi] = useVbenDrawer({
  connectedComponent: MqttParams,
});

const [ExampleReportDrawer, exampleReportDrawerApi] = useVbenDrawer({
  connectedComponent: ExampleReport,
});

const viewAttrReportHandle = () => {
  exampleReportDrawerApi.setData({
    deviceSn: props.device.deviceSn,
    productKey: props.device.productKey,
  });
  exampleReportDrawerApi.open();
};

const viewMqttParamsHandle = () => {
  MqttDrawerApi.setData({
    deviceId: props.device.id,
  });
  MqttDrawerApi.open();
};
</script>

<template>
  <Card>
    <div class="flex items-center">
      <div class="pr-5">
        <Image :src="pruductImage" :width="200" />
      </div>
      <div class="flex-1">
        <div class="mb-4 font-bold">
          <div class="mr-2 inline-block text-xl">
            {{ device.deviceName || '设备名称' }}
          </div>
          <Tag :color="device.isOnline === 0 ? 'red' : 'green'">
            {{ getDeviceStatus(device.isOnline) }}
          </Tag>
        </div>
        <Descriptions>
          <DescriptionsItem label="设备序列号">
            {{ device.deviceSn }}
          </DescriptionsItem>
          <DescriptionsItem label="产品名称">
            {{ device.productName }}
          </DescriptionsItem>
          <DescriptionsItem label="ProductKey">
            {{ device.productKey }}
          </DescriptionsItem>
          <DescriptionsItem label="创建时间">
            {{ device.createTime }}
          </DescriptionsItem>
          <DescriptionsItem label="激活时间">
            {{ device.activeTime || '-' }}
          </DescriptionsItem>
          <DescriptionsItem label="离线时间" v-if="device.isOnline === 0">
            {{ device.lastOfflineTime || '-' }}
          </DescriptionsItem>
          <DescriptionsItem label="在线时间" v-else>
            {{ device.lastOnlineTime || '-' }}
          </DescriptionsItem>
          <DescriptionsItem label="MQTT连接参数">
            <span
              class="cursor-pointer text-[hsl(var(--primary))] underline"
              @click="viewMqttParamsHandle"
            >
              查看参数
            </span>
          </DescriptionsItem>
          <DescriptionsItem label="属性上报示例" :span="2">
            <span
              class="cursor-pointer text-[hsl(var(--primary))] underline"
              @click="viewAttrReportHandle"
            >
              查看示例
            </span>
          </DescriptionsItem>
          <DescriptionsItem label="设备描述">
            {{ device.deviceDesc }}
          </DescriptionsItem>
        </Descriptions>
      </div>
    </div>
    <MqttDrawer />
    <ExampleReportDrawer />
  </Card>
</template>

<style lang="scss" scoped>
:deep(.ant-descriptions-item-container) {
  .ant-descriptions-item-label {
    color: #999;
  }

  .ant-descriptions-item-content {
    color: #333;
  }
}
</style>
